<template>
  <div>
    <el-form
      ref="ruleForm"
      size="small"
      :model="ruleForm"
      :rules="rules"
      label-width="160px"
      label-position="right"
      :disabled="disabled"
    >
      <el-card class="box">
        <div class="box">
          <el-form-item
            label="选择客户"
            prop="customerId"
            label-width="100px"
          >
            <el-input
              readonly
              v-model="ruleForm.customerName"
              placeholder="请选择客户"
              @click.native="handleInputClick"
              suffix-icon="el-icon-edit"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box">
        <div class="title">
          客户基本信息
        </div>
        <div v-if="ruleForm.customerType === '01'">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label-width="0">
                <div style="display: flex; flex-direction: column; ">
                  <div
                    class="up_sy_logo_div"
                    style="margin-left: 15px;"
                  >
                    <el-image
                      v-if="ruleForm.hrefn"
                      style="width:100%;height:200px;"
                      :src="ruleForm.hrefn"
                      :preview-src-list="ruleForm.hrefn ? [ruleForm.hrefn] : []"
                    ></el-image>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="企业名称">
                    <el-input
                      v-model="ruleForm.enterprieName"
                      placeholder="请输入企业名称"
                      clearable
                      :style="{width: '100%'}"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="成立时间">
                    <el-date-picker
                      v-model="ruleForm.companySetDate"
                      type="date"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{width: '100%'}"
                      placeholder="请选择成立时间"
                      disabled
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="统一代码">
                    <el-input
                      v-model="ruleForm.creditCode"
                      placeholder="请输入统一社会信用代码"
                      clearable
                      :style="{width: '100%'}"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业性质">
                    <el-select
                      v-model="ruleForm.companyNature"
                      placeholder="请选择企业性质"
                      :style="{width: '100%'}"
                      disabled
                    >
                      <el-option
                        v-for="dict in natureList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="营业期限开始日期">
                    <el-date-picker
                      v-model="ruleForm.businessStart"
                      type="date"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{width: '100%'}"
                      placeholder="请选择开始日期"
                      disabled
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="营业期限结束日期">
                    <el-date-picker
                      v-model="ruleForm.businessEnd"
                      type="date"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{width: '100%'}"
                      placeholder="请选择结束日期"
                      disabled
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="办公电话">
                    <el-input
                      placeholder="请输入办公电话"
                      v-model="ruleForm.companyTel"
                      maxlength="50"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册资本">
                    <el-input
                      v-model="ruleForm.registerFund"
                      placeholder="请输入注册资本"
                      min="0"
                      :style="{width: '100%'}"
                      type="number"
                      disabled
                    >
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="办公地址">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入办公地址"
                      v-model="ruleForm.companyWordaddress"
                      maxlength="200"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="注册地址">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入注册地址"
                      v-model="ruleForm.companyAddress"
                      maxlength="200"
                      disabled
                      style="width: 100%;"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <div v-if="ruleForm.customerType === '02'">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label-width="0">
                <div style="display: flex; flex-direction: column; ">
                  <div
                    class="up_sy_logo_div"
                    style="margin-left: 15px;"
                  >
                    <el-image
                      v-if="ruleForm.frontFn"
                      style="width:100%;height:175px;"
                      :src="ruleForm.frontFn"
                      :preview-src-list="ruleForm.frontFn ? [ruleForm.frontFn] : []"
                    ></el-image>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label-width="0">
                <div style="display: flex; flex-direction: column; ">
                  <div
                    class="up_sy_logo_div"
                    style="margin-left: 15px;"
                  >
                    <el-image
                      v-if="ruleForm.backFn"
                      style="width:100%;height:175px;"
                      :src="ruleForm.backFn"
                      :preview-src-list="ruleForm.backFn ? [ruleForm.backFn] : []"
                    ></el-image>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input
                      v-model="ruleForm.customerName"
                      placeholder="请输入姓名"
                      clearable
                      disabled
                      :style="{width: '100%'}"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别">
                    <el-select
                      v-model="ruleForm.customerSex"
                      placeholder="请选择性别"
                      :style="{width: '100%'}"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.sys_user_sex"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生日期">
                    <el-date-picker
                      v-model="ruleForm.birthDate"
                      type="date"
                      placeholder="请选择出生日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      disabled
                      :style="{width: '100%'}"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号码">
                    <el-input
                      v-model="ruleForm.customerCreditcode"
                      placeholder="请输入身份证号码"
                      clearable
                      :style="{width: '100%'}"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话号码">
                    <el-input
                      v-model="ruleForm.customerPhone"
                      placeholder="请输入电话号码"
                      :style="{width: '100%'}"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="民族">
                    <el-select
                      v-model="ruleForm.customerNation"
                      placeholder="请选择民族"
                      clearable
                      :style="{width: '100%'}"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.sys_nation"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学历">
                    <el-select
                      v-model="ruleForm.customerEduc"
                      placeholder="请选择学历"
                      clearable
                      :style="{width: '100%'}"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.sys_education"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="婚姻状况">
                    <el-radio-group
                      v-model="ruleForm.customerMarriage"
                      disabled
                    >
                      <el-radio label="1">未婚</el-radio>
                      <el-radio label="0">已婚</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box">
        <div class="title">
          客户资产状况
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              label="情况说明"
              prop="assetCondition"
              label-width="100px"
            >
              <el-input
                :rows="2"
                type="textarea"
                v-model="ruleForm.assetCondition"
                placeholder="请输入情况说明"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table
              :data="ruleForm.assetConditionFileList"
              style="width: 100%;"
              border
            >
              <el-table-column
                label="附件名称"
                prop="fileName"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fileName"
                    placeholder="请输入附件名称"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="附件说明"
                prop="fileRemark"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fileRemark"
                    placeholder="请输入附件说明"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="附件上传"
                prop="fileList"
              >
                <template slot-scope="scope">
                  <el-upload
                    class="upload-demo"
                    :ref="'assetUploadFile' + '_' + scope.$index"
                    :accept="fileAccept"
                    :action="uploadFileUrl + '/file/saveFile'"
                    :before-upload="beforeUpload"
                    :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                    :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'assetUploadFile'+ '_' + scope.$index)"
                    :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                    :file-list="scope.row.fileList"
                    :data="{fileRemark: '', fileuserInfo: ''}"
                    :multiple="false"
                    :auto-upload="true"
                  >
                    <el-button
                      type="text"
                      style="font-size: 16px;"
                      icon="el-icon-upload2"
                    ></el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="150px"
                v-if="ruleForm.assetConditionFileList[0].fileList.length > 0"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="false"
                    @click="handleDownloadFile(scope.row)"
                  >下载</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="false"
                    @click="handlePreviewFile(scope.row)"
                  >预览</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box">
        <div class="title">
          客户征信情况
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              label="征信情况"
              prop="creditInfo"
              label-width="100px"
            >
              <el-radio-group v-model="ruleForm.creditInfo">
                <el-radio :label="1">很好</el-radio>
                <el-radio :label="2">良好</el-radio>
                <el-radio :label="3">一般</el-radio>
                <el-radio :label="4">差</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="情况说明"
              prop="creditCondition"
              label-width="100px"
            >
              <el-input
                :rows="2"
                type="textarea"
                v-model="ruleForm.creditCondition"
                placeholder="请输入情况说明"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table
              :data="ruleForm.creditConditionFileList"
              style="width: 100%;"
              border
            >
              <el-table-column
                label="附件名称"
                prop="fileName"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fileName"
                    placeholder="请输入附件名称"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="附件说明"
                prop="fileRemark"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fileRemark"
                    placeholder="请输入附件说明"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="附件上传"
                prop="fileList"
              >
                <template slot-scope="scope">
                  <el-upload
                    class="upload-demo"
                    :ref="'creditUploadFile' + '_' + scope.$index"
                    :accept="fileAccept"
                    :action="uploadFileUrl + '/file/saveFile'"
                    :before-upload="beforeUpload"
                    :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                    :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'creditUploadFile'+ '_' + scope.$index)"
                    :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                    :file-list="scope.row.fileList"
                    :data="{fileRemark: '', fileuserInfo: ''}"
                    :multiple="false"
                    :auto-upload="true"
                  >
                    <el-button
                      type="text"
                      style="font-size: 16px;"
                      icon="el-icon-upload2"
                    ></el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="150px"
                v-if="ruleForm.creditConditionFileList[0].fileList.length > 0"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="false"
                    @click="handleDownloadFile(scope.row)"
                  >下载</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="false"
                    @click="handlePreviewFile(scope.row)"
                  >预览</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box">
        <div class="title">
          客户联系信息（邮寄地址）
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label-width="0">
              <hsk-address-sel
                :addressShow="addressShow"
                :inputNumShow="inputNumShow"
                :inputInterval="inputInterval"
                @addressChange="addressChange"
                :defaultAddress="defaultAddress"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="详细地址"
              prop="addressInfo.detailAddress"
              label-width="100px"
            >
              <el-input
                v-model="ruleForm.addressInfo.detailAddress"
                placeholder="请输入详细地址"
                clearable
                maxlength="100"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="收件人名称"
              prop="addressInfo.recipName"
              label-width="100px"
            >
              <el-input
                v-model="ruleForm.addressInfo.recipName"
                placeholder="请输入收件人名称"
                clearable
                maxlength="10"
                :style="{width: '100%'}"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="收件人电话"
              prop="addressInfo.recipeTel"
              label-width="100px"
            >
              <el-input
                v-model="ruleForm.addressInfo.recipeTel"
                placeholder="请输入收件人电话"
                clearable
                :style="{width: '100%'}"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="电子邮箱"
              prop="addressInfo.recipEmail"
              label-width="100px"
            >
              <el-input
                v-model="ruleForm.addressInfo.recipEmail"
                placeholder="请输入电子邮箱"
                clearable
                :style="{width: '100%'}"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card v-if="!disabled">
        <div>
          <el-form-item
            label="下一节点审批人"
            prop="targetUserName"
            label-width="120px"
          >
            <el-radio-group v-model="ruleForm.targetUserName">
              <el-radio
                :label="item.userName"
                v-for="item in approveList"
                :key="item.userName"
              >{{ item.nickName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-button
            type="info"
            size="mini"
            @click="handleSubmit('0')"
          >保存草稿</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSubmit('1')"
          >确认提交</el-button>
        </div>
      </el-card>
    </el-form>
    <CustomTable
      :templateName="templateName"
      :queryData="queryData"
      ref="customTableRef"
      @ok="handleOk"
    ></CustomTable>
    <PreviewFile
      :fileType="fileType"
      :fileUrl="fileUrl"
      :dialogVisible="dialogFileVisible"
      @cancel="dialogFileVisible = false"
    />
  </div>
</template>

<script>
import { downloadFile, previewFile } from '@/utils/utils'
import { validatePhone, validateEmail } from '@/utils/validate'
import { getNodeUsers, queryFiles, customerInfo, getNature, customerAdmitInfo } from '@/api/processManage/approveForms'
import PreviewFile from '@/components/PreviewFile/index'
import HskAddressSel from '@/components/area/index.vue'
import CustomTable from "./CustomTable"
export default {
  dicts: ['enabled_file_upload_types', 'sys_user_sex', 'sys_nation', 'sys_education'],
  props: ['templateId', 'doc', 'flowNo', 'disabled', 'options', 'templateName'],
  components: {
    PreviewFile,
    HskAddressSel,
    CustomTable
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
      ruleForm: {
        hrefn: require("@/assets/images/space.png"),
        frontFn: require("@/assets/images/space.png"),
        backFn: require("@/assets/images/space.png"),

        customerId: '',
        customerName: '',
        customerType: '01',

        assetCondition: '',
        assetConditionFile: '',
        assetConditionFileList: [{ fileList: [], fileName: '', fileRemark: '', fileUuid: '' }],

        creditInfo: '',
        creditCondition: '',
        creditConditionFile: '',
        creditConditionFileList: [{ fileList: [], fileName: '', fileRemark: '', fileUuid: '' }],

        addressInfo: {
          detailAddress: '',
          recipName: '',
          recipeTel: '',
          recipEmail: '',
          province: '',
          city: '',
          area: '',
          town: '',
          customerId: ''
        },
        targetUserName: ''
      },
      rules: {
        assetCondition: [{ required: true, message: '请输入情况说明', trigger: 'blur' }],
        creditInfo: [{ required: true, message: '请选择征信情况', trigger: 'change' }],
        creditCondition: [{ required: true, message: '请输入情况说明', trigger: 'blur' }],
        'addressInfo.detailAddress': [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        'addressInfo.recipName': [{ required: true, message: '请输入收件人名称', trigger: 'blur' }],
        'addressInfo.recipeTel': [{ required: true, validator: validatePhone, trigger: 'blur' }],
        'addressInfo.recipEmail': [{ required: true, validator: validateEmail, trigger: 'blur' }],
        targetUserName: [{ required: true, message: '请选择下一节点审批人', trigger: 'blur' }],
      },
      approveList: [],

      fileAccept: '',
      fileUrl: '',
      fileType: '',
      dialogFileVisible: false,

      inputNumShow: 4,
      inputInterval: 10,
      defaultAddress: [],

      queryData: {
        isBondsman: '0',
        // isAdmit: '2'
      },
      natureList: [],
      addressShow: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs['ruleForm'].resetFields();
    })
    this.handleGetNodeUsers()
    this.handleGetNature()
  },
  watch: {
    doc: {
      handler(val) {
        if (JSON.stringify(val) !== '{}') {
          let params = JSON.parse(JSON.stringify(val))
          this.ruleForm = {
            ...params
          };
          this.handleCustomerInfo()
        }
      },
      deep: true
    },
    'dict.type.enabled_file_upload_types': {
      deep: true,
      handler(newValue) {
        if (newValue && newValue.length > 0) {
          this.fileAccept = newValue.map(item => {
            let updatedValue = item.value.split(',').map(item => `.${item}`).join(',');
            return updatedValue;
          }).join(',');
        }
      },
      immediate: true,
    }
  },
  methods: {
    handleGetNature() {
      getNature().then(res => {
        this.natureList = res.rows.map(item => {
          return {
            value: item.companyTypeName,
            label: item.companyTypeName
          }
        })
      })
    },
    addressChange(e) {
      this.ruleForm.addressInfo.detailAddress = e.filter(item => item != '').length ? e.join("") : this.ruleForm.addressInfo.detailAddress

      this.ruleForm.addressInfo.province = e[0] || ''
      this.ruleForm.addressInfo.city = e[1] || ''
      this.ruleForm.addressInfo.area = e[2] || ''
      this.ruleForm.addressInfo.town = e[3] || ''
    },
    handleInputClick() {
      if (!this.disabled) {
        this.$refs.customTableRef.sync()
      }
    },
    handleOk(row) {
      this.addressShow = false
      this.ruleForm.customerName = row.customerName
      this.ruleForm.customerId = row.customerId
      this.ruleForm.customerType = row.customerType
      this.ruleForm = {
        ...this.ruleForm,
        ...row,
        registerFund: Number((row.registerFund / 10000).toFixed(4)),
      }

      this.ruleForm.assetCondition = row.assetCondition
      this.ruleForm.assetConditionFile = row.assetConditionFile

      this.ruleForm.creditInfo = row.creditInfo ? Number(row.creditInfo) : ''
      this.ruleForm.creditCondition = row.creditCondition

      const { addressInfoList} = row

      if (addressInfoList.length) {
        this.defaultAddress = [ addressInfoList[0].province, addressInfoList[0].city, addressInfoList[0].area, addressInfoList[0].town ]
        this.$nextTick(() => {
          this.ruleForm.addressInfo = addressInfoList[0]
        })
      }


      const keys = ['assetConditionFileList', 'creditConditionFileList'];
      keys.forEach(key => {
        this.ruleForm[key] = this.processFileList(row[key]);
      });
      this.handleQueryFiles(row)
    },
    handleQueryFiles(row) {
      if (row.customerType === '01') {
        queryFiles({
          fileId: row.licenseId,
          modelKey: 'original'
        }).then(res => {
          const blob = new Blob([res], { type: "image/jpeg" })
          const fileUrl = window.URL.createObjectURL(blob);
          this.ruleForm.hrefn = fileUrl
        })
        queryFiles({
          fileId: row.legalidcardFront,
          modelKey: 'original'
        }).then(res => {
          const blob = new Blob([res], { type: "image/jpeg" })
          const fileUrl = window.URL.createObjectURL(blob);
          this.ruleForm.frontFn = fileUrl
        })
        queryFiles({
          fileId: row.legalidcardReverse,
          modelKey: 'original'
        }).then(res => {
          const blob = new Blob([res], { type: "image/jpeg" })
          const fileUrl = window.URL.createObjectURL(blob);
          this.ruleForm.backFn = fileUrl
        })
      } else {
        queryFiles({
          fileId: row.idCardFront,
          modelKey: 'original'
        }).then(res => {
          const blob = new Blob([res], { type: "image/jpeg" })
          const fileUrl = window.URL.createObjectURL(blob);
          this.ruleForm.frontFn = fileUrl
        })
        queryFiles({
          fileId: row.idCardReverse,
          modelKey: 'original'
        }).then(res => {
          const blob = new Blob([res], { type: "image/jpeg" })
          const fileUrl = window.URL.createObjectURL(blob);
          this.ruleForm.backFn = fileUrl
        })
      }
    },
    handleCustomerInfo() {
      this.addressShow = true
      customerInfo({ customerId: this.ruleForm.customerId }).then(res => {
        return customerAdmitInfo(this.ruleForm.customerId).then(ret => ({
          ...res.data,
          ...ret.data
        }));
      }).then(data => {
        this.ruleForm = {
          ...data,
          ...this.ruleForm,
          registerFund: Number((this.ruleForm.registerFund / 10000).toFixed(4)),
        }
        this.defaultAddress = [ this.ruleForm.addressInfo.province, this.ruleForm.addressInfo.city, this.ruleForm.addressInfo.area, this.ruleForm.addressInfo.town ]
        
        this.$nextTick(() => {
          this.ruleForm.addressInfo = this.ruleForm.addressInfo
        })
        const keys = ['assetConditionFileList', 'creditConditionFileList'];
        keys.forEach(key => {
          this.ruleForm[key] = this.processFileList(this.ruleForm[key]);
        });
          
        this.ruleForm.creditInfo = this.ruleForm.creditInfo ? Number(this.ruleForm.creditInfo) : ''
        this.handleQueryFiles(this.ruleForm)
      })
    },
    processFileList(paramsList) {
      if (paramsList.length === 0) {
        return [{ fileList: [], fileName: '', fileRemark: '', fileUuid: '' }];
      }

      return paramsList.map(item => ({
        fileList: [{ name: item.fileName }],
        fileName: item.fileName,
        fileRemark: item.fileRemark,
        fileUuid: item.fileUuid
      }));
    },
    handleGetNodeUsers() {
      getNodeUsers({
        templateId: this.templateId,
        flowNo: '',
        targetAction: 'TO_NEXT',
        targetNodeId: ''
      }).then(res => {
        this.approveList = res.data
        this.ruleForm.targetUserName = res.data.length ? res.data[0].userName : ''
      })
    },
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 50) {
        this.$message.error('文件不能超过50M！');
        return false;
      }
      return true;
    },
    handleChange(file, fileList, v) {
      if (fileList.length > 0) {
        v.fileList = [fileList[fileList.length - 1]];
      } else {
        v.fileList = [];
      }
      return true
    },
    handleSuccess(response, file, fileList, v, i, uploadName) {
      let uid = file.uid
      let idx = this.$refs[uploadName].uploadFiles.findIndex(item => item.uid == uid)
      if (response.code != 200) {
        this.$modal.msgError('文件格式或命名存在特殊字符,请检查后重新上传!');
        this.$refs[uploadName].uploadFiles.splice(idx, 1)
        return true;
      }

      const { fileName: originalFileName, fileUuid } = response.data;
      v.fileName = originalFileName.split('.').shift();
      v.fileUuid = fileUuid;
      v.fileList.push(file);
    },
    handleRemove(file, fileList, v) {
      v.fileList = fileList
      if (!v.fileList.length) {
        v.fileUuid = ''
        v.fileName = ''
        v.fileRemark = ''
      }
    },
    // 文件下载
    async handleDownloadFile(row) {
      downloadFile({ fileUuid: row.fileUuid });
    },
    // 文件预览
    async handlePreviewFile(row) {
      try {
        const { arrayBuffer, fileType } = await previewFile({ fileUuid: row.fileUuid });
        this.fileUrl = arrayBuffer;
        this.fileType = fileType;
        this.dialogFileVisible = true
      } catch (error) {
        this.$modal.msgError(error.message);
      }
    },

    handleSubmit(flag) {
      this.ruleForm.flag = flag
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const assetConditionFile = this.ruleForm.assetConditionFileList.map(item => item.fileUuid).join(',')
          const assetConditionFileList = this.ruleForm.assetConditionFileList.filter(item => item.fileUuid.length)
          const creditConditionFile = this.ruleForm.creditConditionFileList.map(item => item.fileUuid).join(',')
          const creditConditionFileList = this.ruleForm.creditConditionFileList.filter(item => item.fileUuid.length)

          this.ruleForm.addressInfo.customerId = this.ruleForm.customerId

          this.$emit('submit', {
            ...this.ruleForm,
            registerFund: Number((this.ruleForm.registerFund * 10000).toFixed(2)),
            assetConditionFile,
            assetConditionFileList,
            creditConditionFile,
            creditConditionFileList,
            flag,
            flowNo: this.flowNo || ''
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .address-container {
  display: flex;
  .el-select--small {
    &:last-child {
      flex: 1;
    }
  }
}
.box {
  margin-bottom: 20px;
  .title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .box-card {
    margin-bottom: 20px;
  }

  .upload-demo {
    display: flex;
    align-items: center;
    :deep(.el-upload-list) {
      width: 90%;
      .el-upload-list__item {
        margin-top: 0 !important;
      }
    }
  }
}
</style>